<template>
	<div style="background-color:lightblue;padding-left:10px;">
		<p>
			<span @click="jump">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-rocket_flat"></use>
				</svg>
			</span>
			<span style="color:white;margin-left:10px;">
				{{username}}
			</span>
		</p>
	</div>
</template>

<script>
	export default {
		name: "headpage",
		props: ["username", "routername"],
		methods:{
			jump(){
				this.$router.push({
					name:this.routername
				}).catch(err=>err)
			}
		}
	}
</script>

<style scoped="scoped">
	p {
		margin: 0;
		padding: 0;
		font-size: 14px;
		line-height: 40px;
	}

	.icon {
		width: 1.5em;
		height: 1.5em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}
</style>
